<template>
  <div class="bodys">
    <div class="order-box">
      <div class="content">
        <div class="order-box_left">
          <div class="order-box_head">
            <img :src="avatar" alt srcset>
          </div>
          <div class="order-box_text">
            <div>{{nickname}}</div>
            <div>{{mobile}}</div>
          </div>
        </div>
        <div class="order-box_right" v-if="['5','6'].includes($route.query.status)">
             {{$route.query.status|getstatus}}
        </div>
         <div class="order-box_right" v-else>
           <div></div>
          <!-- <div>{{type|getTypes}}</div> -->
          <div>{{typeTxt}}</div>
        </div>
      </div>
    </div>
    <div class="detail-box">
      <div class="rows">
        <van-cell title="单价" :value="price"/>
      </div>
      <div class="rows">
        <van-cell title="数量" :value="amount + '枚'"/>
      </div>
      <div class="rows" v-show="handlingFee">
        <van-cell title="手续费" :value="handlingFee + '%'"/>
      </div>
      <div class="rows" v-if="$route.query.act!='1'">
        <van-cell title="需支付" :value="payment + (['1','3','4'].includes($route.query.status)?'¥':'枚')"/>
      </div>
      <div class="rows">
        <van-cell title="提交时间" :value="time"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    avatar: {
      type: [String],
      default: ""
    },
    type: {
      type: [Number],
      default: ""
    },
    typeTxt: {
      type: [String],
      default: ""
    },
    nickname: {
      type: [String],
      default: ""
    },

    mobile: {
      type: [String],
      default: ""
    },
    countdown: {
      type: [String],
      default: ""
    },
    price: {
      type: [String, Number],
      default: 0
    },
    amount: {
      type: [String, Number],
      default: 0
    },
    handlingFee: {
      type: [Number, Boolean],
      default: false
    },
    payment: {
      type: [Number],
      default: 0
    },
    time: {
      type: [String],
      default: ""
    }
  },
   filters: {
    getstatus(value) {
      let msg = ["", "挂卖", "挂买", "买入", "卖出", "已完成", "待匹配"];
      return msg[Number(value)];
    },
    getTypes(value) {
      let msg = [
        "",
        "等待卖家确认收款",
        "请付款",
        "请确认收款",
        "等待买家付款",
        "交易成功",
        "交易失败"
      ];
      return msg[Number(value)];
    }
  },
};
</script>

<style scoped lang="less">
.bodys {
  width: 100%;
  background-color: #ffffff;
  .order-box {
    display: flex;
    align-items: center;
    width: 94%;
    margin: auto;
    padding-top: 1rem;
    border-bottom: 1px solid #f4f4f4;
    .content {
      padding: 0.5rem 1rem;
      display: flex;
      justify-content: space-between;
      width: 100%;
      .order-box_left {
        display: flex;
        .order-box_head {
          width: 3.75rem;
          height: 3.75rem;
          border-radius: 50%;
          img {
            width: 3.75rem;
            height: 3.75rem;
            border-radius: 50%;
          }
        }
        // color:#d68287
        .order-box_text {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
      }
      .order-box_right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }
  }

  .detail-box {
    margin-bottom: 1.3rem;
    .rows {
      margin: auto;
      /*width: 94%;*/
      font-size: 14px;
      height: 3rem;
      line-height: 3rem;
      .item {
        color: #5a5a5a;
      }

      .val {
        float: right;
        color: #212121;
      }
    }
  }
}
</style>